<template>
	<view class="page" :style="{'height':(h-mt)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="反向寻车"></c-nav-bar>
		<view class="v-map">
			<map
				id="xcmap" 
				style="width: 100%; height: 100%;" 
				:latitude="latitude"
				:longitude="longitude" 
				:markers="markers"
			></map>
		</view>
		<view class="info">
			<view class="i_items">
				<view class="ii_title">{{object.licence}}</view>
				<view class="ii_item">
					<view class="iii_l">停车场</view>
					<view class="iii_r">{{object.park}}</view>
				</view>
				<view class="ii_item">
					<view class="iii_l">区域</view>
					<view class="iii_r">{{object.area}}</view>
				</view>
				<view class="ii_item">
					<view class="iii_l">车位号</view>
					<view class="iii_r">{{object.carNo}}</view>
				</view>
				<view class="ii_item">
					<view class="iii_l">停车费</view>
					<view class="iii_r">
						<view class="ir_price">￥<span>{{object.price}}</span></view>
						<view class="ir_qjf" @tap="toPay">去缴费</view>
					</view>
				</view>
			</view>
			<view class="i_btns">
				<view class="ib_back" @tap="backHome">回首页</view>
				<view class="ib_navigation" @tap="toNavigation">去导航</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 284,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				object:null,
				latitude:'',
				longitude:'',
				markers:[]
			}
		},
		onLoad(option) {
			if(option.object){
				this.object = JSON.parse(option.object);
				this.latitude = this.object.latitude;
				this.longitude = this.object.longitude;
				this.markers.push({
					id: Date.parse(new Date()),
					latitude: this.object.latitude,
					longitude: this.object.longitude,
					iconPath: "https://fsy.shengsi.gov.cn/file/20240906/f69da85565434e51849827d256efcadd.png",
					width: 20,
					height: 30
				})
			} 
		},
		methods: {
			toPay(){
				uni.navigateTo({
					url:'/pagesIndex/parkingService/parkingFee?licence='+this.object.licence
				})
			},
			backHome(){
				uni.redirectTo({
					url:'/pagesIndex/parkingService/index'
				})
			},
			toNavigation(){
				uni.openLocation({
					latitude: this.object.latitude,
					longitude: this.object.longitude,
					name: this.object.park,
					address: ''
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		overflow-y: auto;
		.v-map{
			width: 100%;
			height: 100%;
		}
		
		.info{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 567rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;
			.i_items{
				width: 100%;
				border-radius: 20rpx 20rpx 0 0;
				padding: 24rpx 30rpx 0;
				box-sizing: border-box;
				.ii_title{
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #111111;
					margin-bottom: 16rpx;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid rgba(112,112,112,.1);
				}
				.ii_item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;
					.iii_l{
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}
					.iii_r{
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.ir_price{
							display: flex;
							align-items: center;
							font-size: 31rpx;
							font-weight: normal;
							color: #FE401A;
							span{
								font-size: 40rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
							}
						}
						.ir_qjf{
							margin-left: 10rpx;
							font-size: 30rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #007A69;
							text-decoration: underline;
						}
					}
				}
			}
			.i_btns{
				width: 100%;
				padding: 39rpx 30rpx 53rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				&>view{
					font-size: 32rpx;
					letter-spacing: 2rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}
				.ib_back{
					width: 231rpx;
					height: 88rpx;
					border: 2rpx solid #007A69;
					color: #007A69;
				}
				.ib_navigation{
					width: calc(100% - 255rpx);
					height: 88rpx;
					background: #007A69;
					color: #FFFFFF;
				}
			}
		}
	}
</style>